<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width" initial-scale=1>
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/widget.css">
		<link rel="stylesheet" href="css/pricing.css">
	</head>
	<body style="background-image: url(img/a5.jpg); background-size: cover;">
		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/holder.min.js"></script>
		<div class="container-fluid mainbar">
			<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button class='navbar-toggle' data-toggle='collapse' data-target='#myheader'>
						<span class='icon-bar'></span>	
						<span class='icon-bar'></span>	
						<span class='icon-bar'></span>	
					</button>
					<a href="" class="navbar-brand"><strong>BELIEF</strong></a>
				</div>
			
				<div class="collapse navbar-collapse" id="myheader">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">栏目</a></li>
						<li><a href="#">栏目</a></li>
						<li><a href="#">栏目</a></li>
						<li><a href="#">栏目</a></li>
						<li><a href="#">栏目</a></li>
						<li><a href="#">栏目</a></li>
						<li class="dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope"></i> <span class="text">留言</span> <span class="label label-important">5</span> <b class="caret"></b></a>
		                    <ul class="dropdown-menu">
		                        <li><a class="sAdd" title="" href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp;未读信息&nbsp;&nbsp;<span class="badge">10</span></a></li>
		                        <li><a class="sInbox" title="" href="#"><span class="glyphicon glyphicon-pencil"></span>&nbsp;已读信息</a></li>
		                        <li><a class="sTrash" title="" href="#"><span class="glyphicon glyphicon-trash"></span>&nbsp;回收站</a></li>
		                    </ul>
                		</li>
                		<li style="margin-left: 100px;">
	                    	<form action="" class="navbar-form pull-right">
								<div class="form-group">
									<input type="text" placeholder='Search for...' class='form-control' style="border-radius: 15px 15px;">
									<a href="#"><span class="glyphicon glyphicon-search"></span></a>
								</div>
							</form>
	                    </li>
	                    <li>
							<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">登陆/注册</a>

							<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
							  <div class="modal-dialog modal-sm" role="document">
							    <div class="modal-content">
							     <div class="modal-header">
									<button class="close" data-dismiss='modal' >&times;</button>
									<h3 class='modal-title'>登陆/注册</h3>	
								 </div>
									<div class="modal-body">
									    <div class="input-group">
									    	<div class="input-group-btn">
									        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">手机号 <span class="caret"></span></button>
									        <ul class="dropdown-menu">
									          <li><a href="#">微信号</a></li>
									          <li><a href="#">邮箱</a></li>
									          <li><a href="#">QQ号</a></li>
									        </ul>
									  		</div>
									  		<input type="text" class="form-control" aria-label="...">
									    </div><br />
									    <div class="input-group">
									    	<div class="input-group-btn">
									    		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">密码 </button>
									    	</div>
									    	<input type="password" class="form-control" aria-label="...">
									    </div><br />
									    <div class="input-group">
									    	<div class="input-group-btn">
									    		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">验证码 </button>
									    	</div>
									    	<input type="text" class="form-control" aria-label="...">
									    </div>
									</div>
									<div class="modal-footer">
										<button class="btn btn-primary">Ok</button>
										<button class="btn btn-default" data-dismiss='modal'>Cancel</button>	
									</div>
							    </div>
							 </div>
							</div>
	                    </li>
	                    <li>
	                    	<!--换肤-->
							<a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">换肤</a>

							<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
							  <div class="modal-dialog modal-lg" role="document">
							    <div class="modal-content">
								    <div class="modal-header">
										<button class="close" data-dismiss='modal' >&times;</button>
									</div>
								<div class="modal-body">
									<div class="row" id="pic">
										<div class="col-md-3">
											<a href="#" class='thumbnail' id="pic1">
												<img src="img/a1.jpg" alt="" >
											</a>
										</div>
										<div class="col-md-3">
											<a href="#" class='thumbnail' id="pic2">
												<img src="img/a2.jpg" alt="">
											</a>
										</div>
										<div class="col-md-3">
											<a href="#" class='thumbnail' id="pic3">
												<img src="img/a3.jpg" alt="" >
											</a>
										</div>
										<div class="col-md-3">
											<a href="#" class='thumbnail' id="pic4">
												<img src="img/a4.jpg" alt="" >
											</a>
										</div>
									</div>
								   
								</div>
								<div class="modal-footer">
									<button class="btn btn-primary" data-dismiss='modal'>OK</button>	
								</div>
							   </div>
							 </div>
							</div>
	                    </li>
						</div>	
					</ul>	
				</div>
			</div>
		</div>
		
	<!--主体内容-->
	<!--轮播图-->
	<div class="container" style="padding-top: 100px;">
		<h2 idx="picture" id="mypicture"></h2>
		<div class="row">
			<div class="col-md-3">
				<ul class="list-group">
					<li class='list-group-item'>
						<a href="">首页 / 分类 / 品牌 / 产品 </a>
					</li> 
					<li class='list-group-item'>
						<a href="">首页 / 分类 / 品牌 / 产品</a>
					</li>
					<li class='list-group-item'>
						<a href="">首页 / 分类 / 品牌 / 产品 </a>
					</li>
					<li class='list-group-item'>
						<a href="">首页 / 分类 / 品牌 / 产品 </a>
					</li>
					<li class='list-group-item'>
						<a href="">首页 / 分类 / 品牌 / 产品 </a>
					</li>
					<li class='list-group-item'>
						<a href="">首页 / 分类 / 品牌 / 产品 </a>
					</li>
				</ul>
			</div>
			<div class="col-md-9">
				<div class="carousel slide" id='mycarousel'>
					<ul class="carousel-indicators">
					    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
					    <li data-target="#mycarousel" data-slide-to="1"></li>
					    <li data-target="#mycarousel" data-slide-to="2"></li>
					 </ul>	
		
					<div class="carousel-inner">
					    <div class="item active">
							<img src="holder.js/100px250">
							<span class="carousel-caption">图片说明1</span>
					    </div>
		
				        <div class="item">
				    		<img src="holder.js/100px250">
				        	<span class="carousel-caption">音乐道路</span>
				        </div>
		
			            <div class="item">
			        		<img src="holder.js/100px250">
			        		<span class="carousel-caption">图片说明2</span>
			            </div>
					</div>
					<a class="left carousel-control" href="#mycarousel" data-slide="prev" role="button">
					    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ></span>
					</a>
					<a class="right carousel-control" href="#mycarousel" data-slide="next" role="button">
						<span class="glyphicon glyphicon-chevron-right"  aria-hidden="true"></span>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!--用户选择-->
	<div class="container">
	<div class="pricing-info">
		<h2 idx="func" id="myfunc" style="font-family: '楷体';font-weight: bold; text-align: center; color:white">功能区</h2>
		<P style="font-family: '楷体';font-weight: bold; text-align: center; color:white">定制网站所需功能</P>
	</div>
			<div class="services-word">
				<a href="#"><img src="img/line.png" class="img-responsive" alt=""/></a>
			</div> 
				<div class="grids">
					<div class="col-md-3 grid">
						<span class="icon1"></span>
						<h2>用户</h2>
						<p>用户分组</p>
					</div>
					<div class="col-md-3 grid">
						<span class="icon2"></span>
						<h2>编辑</h2>
						<p>编辑布局</p>
					</div>
					<div class="col-md-3 grid">
						<span class="icon3"></span>
						<h2>日历</h2>
						<p>记录事件</p>
					</div>
					<div class="col-md-3 grid">
						<span class="icon4"></span>
						<h2>设置</h2>
						<p>更改用户设置</p>
					</div>
					<div class="clearfix"></div>
				</div>
		</div>
		<!--产品图片展示-->
		<div class="container">
			<h2 idx="showPic" id="myshowPic" class="page-header center-block" style="font-family: '楷体';font-weight: bold; text-align: center; color:white">产品图片展示</h2>
			<div class="row">
				<div class="col-md-4">
					<img src="holder.js/100px200">
				</div>
				<div class="col-md-4">
					<img src="holder.js/100px200">
				</div>
				
				<div class="col-md-4">
					<img src="holder.js/100px200">
				</div>
			</div><br />
			<div class="row">
				<div class="col-md-4">
					<img src="holder.js/100px200">
				</div>
				<div class="col-md-4">
					<img src="holder.js/100px200">
				</div>
				
				<div class="col-md-4">
					<img src="holder.js/100px200">
				</div>
			</div>
				<nav aria-label="Page navigation" style="text-align: center;">
				  <ul class="pagination">
				    <li>
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				    <li><a href="#">1</a></li>
				    <li><a href="#">2</a></li>
				    <li><a href="#">3</a></li>
				    <li><a href="#">4</a></li>
				    <li><a href="#">5</a></li>
				    <li>
				      <a href="#" aria-label="Next">
				        <span aria-hidden="true">&raquo;</span>
				      </a>
				    </li>
				  </ul>
				</nav>
			</div>
		
	<!--评论区留言-->
	<div class="container">
		<h2 idx="comment" id="mycomment" class="page-header" style="font-family: '楷体';font-weight: bold; text-align: center; color:white">评论/留言</h2>
		<div class="row">
				<div class="col-md-6">
					<div class="widget-box">
						<div class="widget-title"><span class="icon"><i class="glyphicon glyphicon-file"></i></span><h5>Recent Posts</h5><span title="54 total posts" class="label label-info tip-left">54</span></div>
						<div class="widget-content nopadding">
							<ul class="recent-posts">
								<li>
									<div class="user-thumb">
										<img width="40" height="40" alt="User" src="img/1.jpg" />
									</div>
									<div class="article-post">
										<span class="user-info"> By: xxxxxxx </span>
										<p>
											<a href="#">用户发表</a>
										</p>
										<button class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span></button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-share-alt"></span></button>
										<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
									</div>
								</li>
								<li>
									<div class="user-thumb">
										<img width="40" height="40" alt="User" src="img/2.jpg" />
									</div>
									<div class="article-post">
										<span class="user-info"> By: xxxxx </span>
										<p>
											<a href="#">用户发表</a>
										</p>
										<button class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span></button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-share-alt"></span></button>
										<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
									</div>
								</li>
								<li>
									<div class="user-thumb">
										<img width="40" height="40" alt="User" src="img/1.jpg" />
									</div>
									<div class="article-post">
										<span class="user-info"> By: xxxxx </span>
										<p>
											<a href="#">用户发表</a>
										</p>
										<button class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span></button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-share-alt"></span></button>
										<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
									</div>
								</li>
								<li class="viewall">
									<a title="View all posts" class="tip-top" href="#"> -- 展开 -- </a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="widget-box">
						<div class="widget-title">
							<div class="widget-title"><span class="icon"><i class="glyphicon glyphicon-pushpin"></i></span><h5>Recent Comments</h5><span title="88 total posts" class="label label-info tip-left">88</span></div>
							<span title="88 total comments" class="label label-info tip-left">88</span></div>
						<div class="widget-content nopadding">
							<ul class="recent-comments">
								<li>
									<div class="user-thumb">
										<img width="40" height="40" alt="User" src="img/1.jpg" />
									</div>
									<div class="comments">
										<span class="user-info"> User: xxxxx </span>
										<p>
											<a href="#">用户评论</a>
										</p>
										<button class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span></button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-thumbs-up"></span></button>
										<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
									</div>
								</li>
								<li>
									<div class="user-thumb">
										<img width="40" height="40" alt="User" src="img/2.jpg" />
									</div>
									<div class="comments">
										<span class="user-info"> User: xxxxx </span>
										<p>
											<a href="#">用户评论</a>
										</p>
										<button class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span></button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-thumbs-up"></span></button>
										<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
									</div>
								</li>
								<li>
									<div class="user-thumb">
										<img width="40" height="40" alt="User" src="img/1.jpg" />
									</div>
									<div class="comments">
										<span class="user-info"> User: xxxxxx</span>
										<p>
											<a href="#">用户评论</a>
										</p>
										<button class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span></button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-thumbs-up"></span></button>
										<button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>

									</div>
								</li>
								<li class="viewall">
									<a title="View all comments" class="tip-top" href="#"> -- 展开 -- </a>
								</li>
							</ul>
						</div>
					</div>
				</div>

		</div>
		</div>
			
		<!--底部内容-->
		<div class="container-fluid">
			<div class="jumbotron text-center" style="margin-bottom:0">
			  <p>软件4班 &copy; 2019.xxxxxxxxxxxxxx.<a target="_blank" href="#"></a></p>
			</div>
		</div>
		
		<!--侧边栏目-->
		<div id="style-switcher">
			&nbsp;&nbsp;
			<span class="glyphicon glyphicon-list"></span>
			<div class="container" style="margin-top: 10px; margin-left: 30px;">
				
				<nav id="mynavbar-list">
			        <ul class="nav bs-docs-sidenav">
		                <li class="nav">
					  	<a id="picture" href="#mypicture">轮播图</a>
						</li>
						<li class="nav">
						  <a id="func" href="#myfunc">功能区</a>
						  <ul class="nav" style="padding-left: 10px; display: none;">
						    <li><a href="#list-group-item">context1</a></li>
						    <li><a href="#list-group-item">context2</a></li>
						    <li><a href="#list-group-item">context3</a></li>
						    <li><a href="#list-group-item">context4</a></li>
						    <li><a href="#list-group-item">context5</a></li>
						  </ul>
						</li>
						<li class="nav">
						  <a id="showPic" href="#myshowPic">图片展示</a>
						  <ul class="nav" style="padding-left: 10px; display: none;">
						    <li><a style="color:green" href="#list-group-item">context1</a></li>
						    <li><a href="#list-group-item">context2</a></li>
						    <li><a href="#list-group-item">context3</a></li>
						    <li><a href="#list-group-item">context4</a></li>
						    <li><a href="#list-group-item">context5</a></li>
						  </ul>
						</li>
						<li class="nav">
					  		<a id="comment" href="#mycomment">评论</a>
						</li>
					</ul>
	 			</nav>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				$("#pic").children().children().click(function(){
					var imgPath = $(this).find("img").attr("src");
					$('body').css("background-image","url("+imgPath+")");
				})
				
				$('#style-switcher span').click(function()
				{
					if($(this).hasClass('open'))
					{
						
						$(this).parent().animate({marginRight:'-=200'});
						$(this).removeClass('open');
					} else 
					{
						$(this).parent().animate({marginRight:'+=200'});
						$(this).addClass('open');
					}
				});
				
				$(window).scroll(function(){
				$('h2').each(function(){
					st=$(window).scrollTop();
					pt=$(this).offset().top;
					if(st>=(pt-0.3*st)){
						idx = $(this).attr('idx');
						if(idx!=null){
							$('#'+idx).attr('style','color:gray')
							$('#'+idx).next().attr('style','margin-left:10px;display: block')
							$('.nav a').not($('#'+idx)).removeAttr('style')
							$('.nav a').not($('#'+idx)).next().attr('style','display: none;')
						}
						
					}
				})
			});
				
			})
		</script>
	</body>
</html>
